<template>
<div>
			<div class="lunbo">

				<vslide :slide="slideData"></vslide>
				
			</div>
			<vmenu :menu="menuData"></vmenu>
			
			<div class="contentT">
				<img src="../images/2017071319283239.jpg@90Q.jpg" alt="">
				<img src="../images/2017071820013654.jpg@90Q.jpg" alt="">
				<img src="../images/cms_122979_1500431583.jpg" alt="">
			</div>
			<div class="contentT1">
				<img src="../images/201705221117303.png@90Q.png" alt="">
				<div class="contentT1-a">
					<img src="../images/2016092417285271.jpg@90Q.jpg" alt="">
					<img src="../images/2017030919451621.jpg@90Q.jpg" alt="">
				</div>
			</div>
			<div class="fl">
				<ul>
					<li>
						<img src="../images/2016092415272487.png@90Q.png" alt="">
						<p>休闲食品</p>
					</li>
					<li>
						<img src="../images/2016092415274759.png@90Q.png" alt="">
						<p>生活用品</p>
					</li>
					<li>
						<img src="../images/2016092415283782.png@90Q.png" alt="">
						<p>方便速食</p>
					</li>
					<li>
						<img src="../images/2016092411075920.png@90Q.png" alt="">
						<p>更多分类</p>
					</li>
				</ul>
			</div>
			<div class="spfl">
				<ul>
					<li>
						<img src="../images/201609241914489.jpg@90Q.jpg" alt="">
					</li>
					<li>
						<img src="../images/2016112918160610.jpg@90Q.jpg" alt="">
					</li>
				</ul>
			</div>
			<!-- <div> -->
				<!-- <div class="fenlei" v-for="m in total">
					<div class="fenlei-a">
						<p>
							<span></span><span>{{m}}</span>
						</p>
						<p>
							<span>更多</span><span>></span>
						</p>
					</div>
					<div class="fenlei-b">
						<img src="images/201610121826404.jpg@90Q.jpg" alt="">
					</div>
					<div class="app"> -->
						<!-- <ul>
							<li v-for="(item,index) in list.data" v-if="index<3">
								<img :src="item.img" alt="" >
								<p>{{item.name}}</p>
								<p v-if="item.pm_desc">{{item.pm_desc}}</p>
								<p>{{item.specifics}}</p>
								<p><span>{{item.price}}</span> <span>{{item.market_price}}</span></p>
							</li>
						</ul> -->
					<!-- </div> -->
				<!-- </div> -->
				
			</div>
	
</div>
	
</template>
<script type="text/javascript">
	import vmenu from './menu';
	import vslide from './slide';
	export default{
		components:{
			vmenu,
			vslide
		},
		data(){
			return {
				menuData:[],
				slideData:[]
			}
		},
		methods:{
			request(){
				this.$http({
					url:"http://h5.yztctech.net/api/axf/apihome.php"
				}).then(function(res){
					console.log(res);
					this.menuData = res.body.data.menu;
					this.slideData = res.body.data.slide;
				})
			}
		},
		mounted(){
			this.request();
		}
	}
	
</script>
<style type="text/css">
	
        	.contentT{
        		margin: .5rem 0 0 0;
        		width: 100%;
        		display: flex;
        		align-items: center;
        		border-top:.2rem solid #ccc; 
        		border-bottom: .2rem solid #ccc; 
        	}
        	.contentT>img{
        		width: 33.33333%;
        	}
        	.contentT1>img{
        		width: 100%;
        	}
        	.contentT1-a{
        		width: 100%;
        		text-align: center;
        	}
        	.contentT1-a>img{
        		width: 45%;
        	}
        	.fl{
        		font-size: .3rem;
        	}
        	.fl>ul{
        		display: flex;
        	}
        	.fl>ul>li{
        		width: 25%;
        		text-align: center;
        	}
        	.fl>ul>li>img{
        		width: 100%;
        	}
        	.spfl>ul{
        		display: flex;
        		flex-wrap: wrap;
        		width: 100%;
        		margin-top: .3rem;
        		border-bottom: .3rem solid #ccc;
        	}
        	.spfl>ul>li{
        		width: 49.5%;
        		border-top:.01rem solid #ccc; 
        		
        	}
        	.spfl>ul>li:nth-of-type(1){
        		border-right:.01rem solid #ccc; 
        	}
        	.spfl>ul>li>img{
        		width: 100%;
        		height: 100%;
        	}
        	.fenlei{
        		width: 95%;
        		margin: 0 auto;
        		font-size: .3rem;
        	}
        	.fenlei-a{
        		margin: .3rem 0 .3rem 0;
        		display: flex;
        		justify-content: space-between;
        	}
        	.fenlei-a>p:nth-of-type(1)>span:nth-of-type(1){
        		display: inline-block;
        		width: .2rem;background: red;height: 100%;
        		vertical-align: top;
        		margin-right: .25rem;
        	}
        	.fenlei-a>p:nth-of-type(1)>span:nth-of-type(2){
        		color: red;
        		font-size: .3rem;
        		font-weight: bold;
        	}
        	.fenlei-a>p:nth-of-type(2)>span:nth-of-type(1){
        		margin-right:.2rem; 
        	}
        	.fenlei-b{
        		width: 100%;
        		margin: 0 auto;
        	}
        	.fenlei-b>img{
        		width: 100%;
        	}
        	.app{
        		width: 100%;
        		font-size: .3rem;
        	}
        	.app>ul{
        		display: flex;
        		width: 100%;
        		flex-wrap: wrap;
        		justify-content: space-around;
        		align-items: center;
        	}
        	.app>ul>li{
        		width: 33.3333%;
        	}
			.app>ul>li>img{
        		width: 100%;
        	}
        	.lunbo{
        		margin-top: 1.5rem;
        	}
</style>